<template>
    <div class="c-goodsItem" :class="{'c-goodsItem_mode2':type === 2,'c-goodsItem_mode3':type === 3}" @click="handleClick">
      <router-link class="goodsItem" tag="div" :to="href">

          <div class="goodsItem-img" v-lazy:background-image.container="img.replace(/\\/,'/')"></div>

          <div class="goodsItem-warpper">

            <div class="goodsItem-title">
                {{title}}
            </div>

            <div class="goodsItem-index">
                {{note}}
            </div>

            <div class="goodsItem-notice">

                <span class="goodsItem-notice-price">
                    <span class="num">
                      {{price}}
                    </span>
                </span>

            </div>

          </div>

          <div class="goodsItem-checked">
            <transition name="iconAni" mode="out-in">
              <i class="iconfont goodsItem-checked-icon icon-add" key="add" v-if="selected" @click="onClickAdd"></i>
              <i class="iconfont goodsItem-checked-icon icon-reduce2" key="reduce" v-else-if="!selected" @click.prevent="onClickReduce"></i>
            </transition>
          </div>

      </router-link>
    </div>
</template>
<script>
    export default {
        props: {
          img:{
            type:String,
            default:"static/img/goods.jpg"
          },
          title:{
            type:String,
            default:"商品标题"
          },
          note:{
            type:String,
            default:"5.5高清大屏"
          },
          price:{
            type:String,
            default:"00.00"
          },
          href:{
            type:String,
            default:""
          },
          type:{
            type:Number,
            default:1
          },
          selected:{
            type:Boolean,
            default:true
          },
          id:{
            type:Number,
            default:-1
          }
        },
        data() {
            return {}
        },
        methods: {
          handleClick(){
            this.$emit("on-click")
          },
          onClickAdd(){
            this.$emit("add")
          },
          onClickReduce(){
            this.$emit("reduce")
          }
        },
        components: {},
        beforeCreate: function () {

        },
        created: function () {

        },
        beforeMount: function () {

        },
        mounted: function () {


        },
        beforeUpdate: function () {

        },
        updated: function () {

        },
        beforeDestroy: function () {

        },
        destroyed: function () {

        },
        beforeRouteEnter(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteUpdate(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteLeave(to, from, next) {
            next(vm => {

            })
        }
    }
</script>
<style lang="less">
  @import "//at.alicdn.com/t/font_441206_6aleqi9phe1rwwmi.css";
  @import "../../common/style/helpers/mixins";
  .c-goodsItem{
     width: 3.00rem;
     height: auto;
     margin-left: 0.05rem;
     margin-right: 0.15rem;
     margin-bottom: 0.15rem;

    .goodsItem{
      height: 100%;
      width: 100%;
      &-img{
        width: 100%;
        height: 3rem;
        position: relative;
        background-size: cover;
      }
      &-title{
        font-size: .28rem;
        color: rgba(0,0,0,.87);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .omit();
      }
      &-index{
        margin-top: .06rem;
        font-size: .23rem;
        height: .3rem;
        line-height: .3rem;
        color: rgba(0,0,0,.54);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &-notice{
        display: inline-block;
        font-size: .28rem;
        color: #ff6000;
        margin-top: .01rem;
        position: relative;
        margin-left: .2rem;
        white-space: nowrap;
        padding-left: 0.05rem;

        &:before{
          content: "￥";
          position: absolute;
          left: -.2rem;
          top: .02rem;
          font-size: .2rem;
          margin-right: .05rem;
          font-weight: 400;
        }
      }
      &-warpper{
        width: 100%;
        position: relative;
        left: 0.05rem;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &>div{
          height: 0.4rem;
          line-height: 0.5rem;
        }
      }
      &-checked{
        display: none;
      }
    }

    &_mode2,&_mode3{
      width: 100%;
      background: #fff;
      border-bottom: 1px solid #ccc;
      margin: 0;

      .goodsItem{
        display: flex;
        justify-content: space-between;
        &-img{
          width: 30%;
          height: 2rem;
          position: relative;
        }
        &-warpper{
          width: 65%;
          position: relative;
          left: 0.05rem;
        }
      }
    }

    &_mode3{
      .goodsItem{
        &-img{
          width: 1.8rem;
        }
        &-warpper{
          width: 2.8rem;
          position: relative;
          left: 0.05rem;
          padding-left: 0.2rem;
        }
        &-checked{
          width: 1.8rem;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 2rem;
          &-icon{
            font-size: 0.8rem;
            color: #666;
          }

          .icon-add{
            color: #37cdb7;
          }

          .icon-reduce2{
            color: rgb(255, 22, 102);
          }
        }
      }
    }

    &_mode2{
      .goodsItem{
        &-warpper{
          &>div{
            height: 0.5rem;
            line-height: 0.5rem;
          }
        }
      }
    }

    .iconAni-enter-active{
      animation:zoomIn 0.3s linear;
    }
    .iconAni-leave-active{
      animation:zoomOut 0.3s linear;
    }
  }
</style>
